<template>
  <div class="dashboard-container">
    <!-- 内容区域 -->
    <el-card>
      <!-- 标题区域 -->
      <div slot="header">当前分类层级: {{ title }}</div>
      <!-- 操作区域  -->
      <div class="action-view mb20">
        <el-button style="margin-right: 10px;" icon="el-icon-plus" type="primary" size="small" @click="dialogVisible = true">增加</el-button>
        <el-popconfirm title="你确定要删除吗?">
          <el-button slot="reference" icon="el-icon-delete" type="danger" size="small">批量删除</el-button>
        </el-popconfirm>

        <el-button v-if="level !== 1" round size="small" style="float: right;" @click="backLevel">返回上级</el-button>
      </div>
      <!-- 表格区域 -->
      <div class="table-view mb20">
        <el-table :data="tableData">
          <!-- 通过指定column的类型 来设置复选框 -->
          <el-table-column type="selection" />
          <el-table-column label="分类名称" prop="categoryName" width="300" />
          <el-table-column label="级别" prop="categoryLevel">
            <template slot-scope="{ row }">
              <el-tag v-if="row.categoryLevel === 1">一级</el-tag>
              <el-tag v-if="row.categoryLevel === 2" type="success">二级</el-tag>
              <el-tag v-if="row.categoryLevel === 3" type="danger">三级</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="排序值" prop="categoryRank" />
          <el-table-column label="添加时间" prop="createTime" />
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button type="text">修改</el-button>
              <el-button v-if="level !== 3" type="text" @click="nextLevel(row.categoryId)">下级分类</el-button>
              <!-- 气泡确认框 -->
              <el-popconfirm title="你确定要删除吗?">
                <el-button slot="reference" style="margin-left: 10px;" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页区域 默认分页10条一页-->
      <div class="page-view fc">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pagable.total"
          :current-page="pagable.page"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!-- 弹窗dialog -->
    <el-dialog title="添加分类" :visible="dialogVisible" width="40%" :before-close="closeDialog">
      <!-- 表单组件 -->
      <el-form ref="formRef" :model="formInput" :rules="formRules" label-position="right" label-width="100px">
        <!-- 表单项 -->
        <el-form-item label="分类名称" prop="categoryName">
          <el-input v-model="formInput.categoryName" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="排序值" prop="categoryRank">
          <el-input v-model.number="formInput.categoryRank" type="number" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Category',
  data() {
    return {
      // 表格数据
      tableData: [],
      // 分页配置
      pagable: {
        page: 1,
        total: 0
      },
      // 分类层级
      level: 1,
      // 上级分类ID
      parentId: 0,
      // 一级分类ID
      rootId: 0,
      dialogVisible: false,
      formInput: {},
      formRules: {
        categoryName: { required: true, message: '分类名不能为空' },
        categoryRank: { type: 'number', required: true, min: 0, max: 200, message: '排序值不符合规则' }
      }
    }
  },
  computed: {
    title() {
      const level_arr = ['', '一级', '二级', '三级']
      return level_arr[this.level]
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    // 获取数据
    async getTableData() {
      const { page } = this.pagable
      const { level, parentId } = this
      // 1. 发起请求  pageNumber 页码  pageSize 每页条数 categoryLevel 分类层级  parentId 上级分类ID
      const params = { pageNumber: page, pageSize: 10, categoryLevel: level, parentId }
      const { data } = await this.$http.get('/categories', { params })
      console.log(data)
      // 2. 将请求结果渲染到页面中
      this.tableData = data.list
      this.pagable.total = data.totalCount
    },
    // 页码更改
    pageChange(page) {
      // 更改data中的页码
      this.pagable.page = page
      // 获取数据
      this.getTableData()
    },
    // 加载下级分类
    nextLevel(id) {
      if (this.level === 3) return this.$message.warning('已经没有下一级了')
      // 如果是一级则保存当前id【返回2级】
      if (this.level === 1) this.rootId = id
      // 增加层级
      this.level += 1
      this.parentId = id
      this.pagable.page = 1
      this.getTableData()
    },
    // 返回上级分类
    backLevel() {
      this.level -= 1
      // 二级则用之前保存的一级ID  一级则直接使用0
      this.parentId = this.level === 2 ? this.rootId : 0
      this.pagable.page = 1
      this.getTableData()
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
      this.formInput = {}
      // 重置表单
      this.$refs.formRef.resetFields()
    },
    // 提交表单
    async submitForm() {
      try {
        // 获取表单实例 调用验证方法
        await this.$refs.formRef.validate()
        // 验证成功 则发起请求新增分类 【层级 -> 当前所处层级   父类ID ->  1级0  其他级所点的id 】
        const query = { ...this.formInput, categoryLevel: this.level, parentId: this.parentId }
        await this.$http.post('/categories', query)
        this.$message.success('操作成功')
        this.closeDialog()
        this.getTableData()
      } catch (error) {
        console.log('验证失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
